<? 
session_start();
$output = "<html>
	<head>	 	
		<!-- Main -->
	</head>
	<body>
		<div class = 'content-title-container'>
			<div class='normal-text grey-text content-title-text fl-left' style='padding-right: 5px;'>Help section </div>
		</div>
			<div id='indent-content-container' class='me-content-container'> 
				<div class = 'content-subtitle-container-open'></div>
					<div id='news-out'>
						<div id='news' style='min-height: 492px;'>
							<div class='border-bottom' style='padding-bottom:10px;'>
								<div class='normal-text blue-text content-title-text fl-left' style='padding-right: 5px;'>Save a spec:</div>
								<div class='normal-text grey-text content-title-text fl-left' style='padding-right: 5px;padding-bottom: 10px;'>
									In order to create and save a new spec you must be logged in. There are two ways to save a spec, either you
									go directly to the 'calculator' while you are logged in or you click on 'empty slot' on your user page.
									In either case you will see a 'Save spec' button on the calculator (see pic below) where you can 
									save your new spec after entering an optional comment.
								</div>
								<div style='padding-left:20px;'><img class='fl-left blue-border' style='margin:5px;' src='media/news/save_spec.png'/></div>
								<div style='clear:both; height:5px;'></div>
							</div>
							<div class='border-bottom' style='padding-bottom:10px; padding-top:20px'>
								<div class='normal-text blue-text content-title-text' style='padding-right: 5px;'>Managing your specs:</div>
								<div class='normal-text grey-text content-title-text' style='padding-right: 5px;padding-bottom: 10px;'>
									You can publish, edit and delete your own specs. 
									<div class='normal-text blue-text content-title-text' style='padding: 10px;padding-left: 0px;'>If your spec is not published it will NOT be shown to another user
									browsing your page and they will not be able to comment on it.</div>
									In order to do so click the 'publish' button next to your spec on your user page (see pic below).
									You can also 'edit' your spec which takes you directly to your spec in the calculator or totally 'delete' a spec if you so desire. (note that when deleting a spec all comments and ratings are lost!)
								</div>
								<div style='padding-left:20px;'><img class='fl-left blue-border' style='margin:5px;'src='media/news/pub_spec.png'/></div>
								<div style='clear:both; height:5px;'></div>
							</div>
							<div class='border-bottom' style='padding-bottom:10px; padding-top:20px'>
								<div class='normal-text blue-text content-title-text' style='padding-right: 5px;'>Browsing other specs:</div>
								<div class='normal-text grey-text content-title-text' style='padding-right: 5px;padding-bottom: 10px;'>
									Browse other specs using the 'browser'. Once you searched for specs you can either directly see the spec 
									in the calculator when clicking on 'show' or you can go to the page of the user by clicking his name.
								</div>
								<div style='padding-left:20px;'><img class='fl-left blue-border' style='margin:5px;' src='media/news/browse.png'/></div>
								<div style='clear:both; height:5px;'></div>
								<div class='normal-text grey-text content-title-text' style='padding-right: 5px;padding-bottom: 10px;'>
									If you click on the users name you arrive at his page where you can do several things:
									You can see his published specs indirectly by clicking the spec picture to enlarge it (see pic) or you can directly see
									the spec in the calculator by clicking 'show' next to it (see pic). You can rate his spec by selecting the
									stars on the right hand side (see pic) under the spec picture or you can comment on his spec directly.
								</div>
								<div class='normal-text blue-text content-title-text' style='padding: 10px;'>You can link to your own site using this link: http://www.ffxivspecs.com/#/user/{name} </div>
								<div style='padding-left:20px;'><img class='fl-left blue-border' style='margin:5px;' src='media/news/user_cp.png'/></div>
								<div style='clear:both; height:5px;'></div>
							</div>
							<div class='border-bottom' style='padding-bottom:10px; padding-top:20px'>
								<div class='normal-text blue-text content-title-text' style='padding-right: 5px;'>Updating your profile:</div>
								<div class='normal-text grey-text content-title-text' style='padding-right: 5px;padding-bottom: 10px;'>
									You can update your profile on your 'profile' page which is accessable on the 'user' page (see pic). 
									There you can upload an avatar or pofile picture or add a game character as well as change your personal information.
									Next to your profile is the menu 'messages' where you can have a look at your personal message.
								</div>
								<div style='padding-left:20px;'><img class='fl-left blue-border' style='margin:5px;' src='media/news/user_profile.png'/></div>
								<div style='clear:both; height:5px;'></div>
							</div>
							<div class='' style='padding-bottom:10px; padding-top:20px'>
								<div class='normal-text blue-text content-title-text' style='padding-right: 5px;'>Sending messages:</div>
								<div class='normal-text grey-text content-title-text' style='padding-right: 5px;padding-bottom: 10px;'>
									You can send messages to other users when you go to their personal page and klick on the mail icon on the top right(see pic).
								</div>
								<div style='padding-left:20px;'><img class='fl-left blue-border' style='margin:5px;' src='media/news/mail_icon.png'/></div>
								<div style='clear:both; height:5px;'></div>
							</div>
						</div>
					</div>
					<div style='clear:both; height:5px;'></div>
					<div class = 'content-subtitle-container-close'></div>
				</div>
	</body>
</html>";

echo $output;